//左侧内容中的 -分类列表  list_components_
Vue.component("list_components_catlist", {
    template: `<div class="catlist">
                <h2>电脑、办公</h2>
                <div class="catlist_wrap">
                    <div class="child">
                        <h3 class="on"><b></b>电脑整机</h3>
                        <ul>
                            <li><a href="">笔记本</a></li>
                            <li><a href="">超极本</a></li>
                            <li><a href="">平板电脑</a></li>
                        </ul>
                    </div>

                    <div class="child">
                        <h3><b></b>电脑配件</h3>
                        <ul class="none">
                            <li><a href="">CPU</a></li>
                            <li><a href="">主板</a></li>
                            <li><a href="">显卡</a></li>
                        </ul>
                    </div>

                    <div class="child">
                        <h3><b></b>办公打印</h3>
                        <ul class="none">
                            <li><a href="">打印机</a></li>
                            <li><a href="">一体机</a></li>
                            <li><a href="">投影机</a></li>
                            </li>
                        </ul>
                    </div>

                    <div class="child">
                        <h3><b></b>网络产品</h3>
                        <ul class="none">
                            <li><a href="">路由器</a></li>
                            <li><a href="">网卡</a></li>
                            <li><a href="">交换机</a></li>
                            </li>
                        </ul>
                    </div>

                    <div class="child">
                        <h3><b></b>外设产品</h3>
                        <ul class="none">
                            <li><a href="">鼠标</a></li>
                            <li><a href="">键盘</a></li>
                            <li><a href="">U盘</a></li>
                        </ul>
                    </div>
                </div>

                <div style="clear:both; height:1px;"></div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
//左侧内容中的 -新品推荐
Vue.component("list_components_newgoods", {
    template: `<div class="newgoods leftbar mt10">
                <h2><strong>新品推荐</strong></h2>
                <div class="leftbar_wrap">
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/list_hot1.jpg" alt=""/></a></dt>
                                <dd><a href="">美即流金丝语悦白美颜新年装4送3</a></dd>
                                <dd><strong>￥777.50</strong></dd>
                            </dl>
                        </li>

                        <li>
                            <dl>
                                <dt><a href=""><img src="images/list_hot2.jpg" alt=""/></a></dt>
                                <dd><a href="">领券满399减50 金斯利安多维片</a></dd>
                                <dd><strong>￥239.00</strong></dd>
                            </dl>
                        </li>

                        <li class="last">
                            <dl>
                                <dt><a href=""><img src="images/list_hot3.jpg" alt=""/></a></dt>
                                <dd><a href="">皮尔卡丹pierrecardin 男士长...</a></dd>
                                <dd><strong>￥1240.50</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
//左侧内容中的 -热销排行
Vue.component("list_components_hotgoods", {
    template: `<div class="hotgoods leftbar mt10">
                <h2><strong>热销排行榜</strong></h2>
                <div class="leftbar_wrap">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
//左侧内容中的 - 最近浏览
Vue.component("list_components_viewd", {
    template: `<div class="viewd leftbar mt10">
                <h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
                <div class="leftbar_wrap">
                    <dl>
                        <dt><a href=""><img src="images/hpG4.jpg" alt=""/></a></dt>
                        <dd><a href="">惠普G4-1332TX 14英寸笔记...</a></dd>
                    </dl>

                    <dl class="last">
                        <dt><a href=""><img src="images/crazy4.jpg" alt=""/></a></dt>
                        <dd><a href="">直降200元！TCL正1.5匹空调</a></dd>
                    </dl>
                </div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
// 列表内容中的-  热卖、促销 - 热卖推荐
Vue.component("list_components_hotsale", {
    template: `<div class="hotsale fl">
                    <h2><strong><span class="none">热卖推荐</span></strong></h2>
                    <ul>
                        <li>
                            <dl>
                                <dt><a href=""><img src="images/hpG4.jpg" alt=""/></a></dt>
                                <dd class="name"><a href="">惠普G4-1332TX 14英寸笔记本电脑 （i5-2450M 2G 5</a></dd>
                                <dd class="price">特价：<strong>￥2999.00</strong></dd>
                                <dd class="buy"><span>立即抢购</span></dd>
                            </dl>
                        </li>

                        <li>
                            <dl>
                                <dt><a href=""><img src="images/list_hot3.jpg" alt=""/></a></dt>
                                <dd class="name"><a href="">ThinkPad E42014英寸笔记本电脑</a></dd>
                                <dd class="price">特价：<strong>￥4199.00</strong></dd>
                                <dd class="buy"><span>立即抢购</span></dd>
                            </dl>
                        </li>

                        <li>
                            <dl>
                                <dt><a href=""><img src="images/acer4739.jpg" alt=""/></a></dt>
                                <dd class="name"><a href="">宏碁AS4739-382G32Mnkk 14英寸笔记本电脑</a></dd>
                                <dd class="price">特价：<strong>￥2799.00</strong></dd>
                                <dd class="buy"><span>立即抢购</span></dd>
                            </dl>
                        </li>
                    </ul>
                </div>`,
    data() {
        return {}

    },
    methods: {}
})
// 列表内容中的 -热卖、促销 -促销活动
Vue.component("list_components_promote", {
    template: `<div class="promote fl">
                    <h2><strong><span class="none">促销活动</span></strong></h2>
                    <ul>
                        <li><b>.</b><a href="">DIY装机之向雷锋同志学习！</a></li>
                        <li><b>.</b><a href="">京东宏碁联合促销送好礼！</a></li>
                        <li><b>.</b><a href="">台式机笔记本三月巨惠！</a></li>
                        <li><b>.</b><a href="">富勒A53g智能人手识别鼠标</a></li>
                        <li><b>.</b><a href="">希捷硬盘白色情人节专场</a></li>
                    </ul>

                </div>`,
    data() {
        return {}

    },
    methods: {}
})
// 列表内容中的 -商品筛选
Vue.component("list_components_filter", {
    template: `<div class="filter mt10">
                <h2><a href="">重置筛选条件</a> <strong>商品筛选</strong></h2>
                <div class="filter_wrap">
                    <dl>
                        <dt>品牌：</dt>

                        <dd :class="{cur:bid==''}"><a href="#"  @click.prevent="select('')">不限</a></dd>
                        <dd :class="{cur:brand.id==bid}" v-for="(brand,k) in brands "><a :href="locl_url+'&brand='+brand.id"  @click.prevent="select(brand.id)">{{brand.brand_name}}</a></dd>
                    </dl>
                    <dl>
                        <dt>价格：</dt>
                        <dd :class="{cur:priceid==0}"><a href="" @click.prevent="selectPriceid()">不限</a></dd>
                          <dd  :class="{cur:p.id==priceid}" v-for="p in prices"><a href="" @click.prevent="selectPriceid(p)">{{p.min_price}}-{{p.max_price}}</a></dd>
                       
                    </dl>

                    <dl v-for="gg in specifications">
                        <dt>{{gg.spec_name}} ： </dt>
                        <dd :class="{cur:gg.selected == 0}"><a href="#"  @click.prevent="selectGuige(gg)">不限</a></dd>
                        <dd :class="{cur:gg.selected == option.id}" v-for="option in gg.options" ><a href="#" @click.prevent="selectGuige(gg,option)">{{option.option_name}}</a></dd>
                    </dl>
                  
                </div>
            </div>`,

    props: ['goods_pro'],
    data() {
        return {
            locl_url: window.location.href,
            brands: [],
            bid: "",
            specifications: [],
            priceid: 0,
            cat: GetQueryString("cat"),
            prices: [
                {
                    id: 1,
                    min_price: 2000,
                    max_price: 2999
                }, {
                    id: 2,
                    min_price: 3000,
                    max_price: 3499
                }, {
                    id: 3,
                    min_price: 3500,
                    max_price: 3999
                }, {
                    id: 4,
                    min_price: 4000,
                    max_price: 4999
                }, {
                    id: 5,
                    min_price: 5000,
                    max_price: 5999
                }, {
                    id: 6,
                    min_price: 6000,
                    max_price: 6999
                }, {
                    id: 7,
                    min_price: 7000,
                    max_price: 7999
                }
            ]
        }

    },
    created() {

        GetBrands(this.cat).then(res => {
            this.brands = res.data.data
        })
        GetSpeciFications(this.cat).then(res => {
            this.specifications = res.data.data
        })

    },
    methods: {
        select(bid) {
            this.bid = bid
            // 修改品牌的id
            this.goods_pro.brand_id = bid
            this.updateDate()
        },
        // 改变规格的信息
        selectGuige(gg, option) {
            if (option == null) {
                gg.selected = 0
            } else {
                //修改样式
                gg.selected = option.id
            }
            this.updateDate()
        },
        // 选择金额
        selectPriceid(p) {
            if (p == null) {
                this.priceid = 0
                //修改goods_pro 中的最大最少金额
                this.goods_pro.max_price = ""
                this.goods_pro.min_price = ""
            } else {
                this.priceid = p.id
                //修改goods_pro 中的最大最少金额
                this.goods_pro.max_price = p.max_price
                this.goods_pro.min_price = p.min_price
            }
            this.updateDate()
        },
        // 用于刷新数据
        updateDate() {
            // 获取 data 里面的数据，拼接数据
            var list = []
            for (v in this.specifications) {
                data = this.specifications[v]
                // 默认选中的 不需要添加到 goods_pro中
                if (data.selected != 0) {
                    list[list.length] = [data.id, data.selected]
                }
            }
            this.goods_pro.spec_list = list
            GetGoodsList(this.goods_pro).then(res => {
                this.$emit("update-date", res, this.goods_pro)
            })
        }

    }
})
// 列表内容中的 -排序
Vue.component("list_components_sort", {
    template: `<div class="sort mt10">
                <dl>
                    <dt>排序：</dt>
                    <dd  :class="{cur:priceid==0}"><a href="" @click.prevent="selectPro('comment_count',0)">销量</a></dd>
                    <dd :class="{cur:priceid==1}"><a href="" @click.prevent="selectPro('price',1)">价格</a></dd>
                    <dd :class="{cur:priceid==2}"><a href=""  @click.prevent="selectPro('comment_count',2)">评论数</a></dd>
                    <dd :class="{cur:priceid==3}"><a href="" @click.prevent="selectPro('on_sale_time',3)">上架时间</a></dd>
                </dl>
            </div>`,
    props: ['goods_pro'],
    data() {
        return {
            priceid: 0,
        }
    },
    methods: {
        // 选择排序字段
        selectPro(name, num) {
            this.priceid = num
            this.goods_pro.sort_by = name;
            this.updateDate();

        },
        // 用于刷新数据
        updateDate() {
            GetGoodsList(this.goods_pro).then(res => {
                this.$emit("update-date", res, this.goods_pro)
            })
        }


    }
})
// 列表内容中的 - 商品列表
Vue.component("list_components_goodslist", {
    template: `
 <div class="goodslist mt10">
                <ul>
                    <li v-for="good in goods_list">
                        <dl>
                            <dt><a :href="'/goods.html?id='+good.id"><img :src="good.midlogo" alt=""/></a></dt>
                            <dt>
                            <a :href="'/goods.html?id='+good.id">{{good.goods_name}}</a>
                            </dt>
                            <dt>
                            <strong>{{good.price}}</strong>
                            </dt>
                            <dt>
                            <a :href="'/goods.html?id='+good.id"><em>已有{{good.comment_count}}人评价</em></a>
                            </dt>
                        </dl>
                    </li>
                </ul>
            </div>`,
    data() {
        return {}

    },
    props: ['goods_list'],
    methods: {}
})
// 列表内容中的 - 分页信息
Vue.component("list_components_page", {
    template: `<div class="page mt20">
                <a href="">首页</a>
                <a href="">上一页</a>
                <a href="">1</a>
                <a href="">2</a>
                <a href="" class="cur">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">下一页</a>
                <a href="">尾页</a>&nbsp;&nbsp;
                <span>
					<em>共8页&nbsp;&nbsp;到第 <input type="text" class="page_num" value="3"/> 页</em>
					<a href="" class="skipsearch" href="javascript:;">确定</a>
				</span>
    
            </div>`,
    data() {
        return {}
    },

    methods: {}
})

